const template = document.createElement("template");

template.innerHTML = /*html*/ `
<style>
:host {
  width: 1em;
  height: 1em;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

svg {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>
<svg>
  <use href="" />
</svg>
`;

export default class IconSvg extends HTMLElement {
  // static observedAttributes = ["color"];
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: "closed" });
    const content = template.content.cloneNode(true);
    const name = this.getAttribute("name");
    let baseUrl;
    if(window?.utools?.isDev()){
      baseUrl = location.href.split('/public/')[0] + '/public';
    }else{
      baseUrl = location.href.split('.asar/')[0] + '.asar';
    }
    
    content
      .querySelector("svg use")
      .setAttribute("href", `${baseUrl}/components/IconSvg/${name}.svg#${name}`);

    if (this.getAttribute("color")) this.style.color = this.getAttribute("color");
    shadow.appendChild(content);
  }

  // attributeChangedCallback(name, oldValue, newValue){
  //   console.log(this, name, oldValue, newValue);
  //   this.style.color = newValue;

  // }
}
